<template>
  <div class="questions-preview">
    <el-dialog
      title="题目预览"
      class="dialog"
      :visible.sync="dialogTableVisibleT"
      width="900px"
      @close="closeFn"
    >
      <!-- 头部 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple littleTitle">【题型】: {{ questionType }}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple littleTitle">【编号】: {{questionData.id}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple littleTitle">【难度】: {{difficulty}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple littleTitle">【标签】: {{questionData.tags}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple littleTitle">【学科】: {{questionData.subject}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple littleTitle">【目录】: {{directorys}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple littleTitle">【方向】: {{questionData.direction}}</div>
        </el-col>
      </el-row>

      <hr />
      <!-- 第二行 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple littleTitle">【题干】:</div>
        </el-col>
      </el-row>

      <!-- 题目部分 -->
      <el-row :gutter="20">
        <el-col>
          <div
            class="grid-content bg-purple littleTitle questionColor"
          >{{initP(questionData.question)}}</div>
        </el-col>
      </el-row>

      <el-row :gutter="20" v-if="isShow">
        <el-col>
          <div
            class="grid-content bg-purple littleTitle"
          >{{ questionType ==='多选题' ? '多选题' : '单选题'}} 选项：（以下选中的选项为正确答案）</div>
        </el-col>
      </el-row>

      <!-- 选项部分 -->
      <!-- 这里需要做一个判断，区分单选、多选、简答 -->

      <!-- 单选部分 -->
      <div class="radio" v-if="questionType ==='单选题'">
        <el-row :gutter="20" v-for="(item,i) in questionData.options" :key="i">
          <el-col>
            <div class="grid-content bg-purple littleTitle">
              <el-radio :label="i" v-model="radio" @change="clickFn">{{item.title}}</el-radio>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 多选部分 -->
      <div class="multiSelect" v-else-if="questionType ==='多选题'">
        <el-row :gutter="20" v-for="(item,i) in questionData.options" :key="i">
          <el-col>
            <el-checkbox-group v-model="selectList" class="grid-content bg-purple littleTitle">
              <el-checkbox :label="item.title" :key="i" @change="changeFn"></el-checkbox>
            </el-checkbox-group>
          </el-col>
        </el-row>
      </div>

      <hr />
      <!-- 参考答案 -->
      <el-row :gutter="20">
        <el-col>
          <div class="grid-content bg-purple littleTitle">
            <span>【参考答案】: &nbsp;</span>
            <el-button type="danger" @click="videoIsShowFn()">视频答案预览</el-button>
            <div class="videoClass" v-if="videoIsShow">
              <video ref="videoPlay" class="videoc" autoplay controls :src="questionData.videoURL"></video>
            </div>
          </div>
        </el-col>
      </el-row>

      <hr />
      <!-- 答案解析 -->
      <el-row :gutter="20">
        <el-col>
          <span class="littleTitle">【答案解析】: &nbsp;</span>
          <span class="littleTitle answerParse">{{initP(questionData.answer)}}</span>
        </el-col>
      </el-row>

      <hr />
      <!-- 题目备注 -->
      <el-row :gutter="20">
        <el-col>
          <div class="grid-content bg-purple littleTitle">
            <span>【题目备注】: &nbsp;</span>
            <span>{{questionData.remarks}}</span>
          </div>
        </el-col>
      </el-row>
      <hr />

      <!-- 最底部关闭按钮 -->
      <el-row :gutter="20" slot="footer">
        <el-button type="primary" class="closeBtn" @click="closeFn">关闭</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>

import { detail as detailTags } from '@/api/hmmm/tags'
import { detail as detailDirectorys } from '@/api/hmmm/directorys'

export default {
  name: 'questionsPreview',

  props: {
    //这个值是个布尔，控制弹窗的跳出，必须传
    dialogTableVisible: {
      type: Boolean,
      request: true
    },

    //这里是该题目数据的对象
    questionData: {
      type: Object,
      request: true
    }
  },




  data () {
    return {
      dialogFormVisible: false,
      questionType: null,
      isShow: null,
      difficulty: null,
      subject: null,
      radio: null,
      trueRadio: null,
      selectList: [],
      trueSelectList: [],
      videoIsShow: false,
      dialogTableVisibleT: null,
      directorys: null
    }
  },


  watch: {
    //监听数据,当数据发生改变时
    questionData: {
      immediate: true,
      deep: true,
      async handler () {
        //这里区分题目类型 和 到底是出现多选框选项 还是 单选框选项
        if (this.questionData.questionType == 2) {
          this.isShow = true
          this.questionType = '多选题'
        } else if (this.questionData.questionType == 1) {
          this.isShow = true
          this.questionType = '单选题'
        } else {
          this.isShow = false
          this.questionType = '解答题'
        }


        // console.log(this.questionData.subject);

        //这里区分题目的难度
        if (this.questionData.difficulty == '3') {
          this.difficulty = '困难'
        } else if (this.questionData.difficulty == '2') {
          this.difficulty = '一般'
        } else if (this.questionData.difficulty == '1') {
          this.difficulty = '简单'
        }

        //记录选框的状态
        this.questionData.options.forEach((item, i) => {
          if (this.questionData.questionType == 2) {
            //当数据是多选题时执行这个
            if (item.isRight == 1) {
              this.selectList.push(item.title)
              this.trueSelectList = this.selectList
            }
          } else if (this.questionData.questionType == 1) {
            //当数据时单选框时执行
            if (item.isRight == 1) {
              this.radio = i
              this.trueRadio = this.radio
            }
          }
        })

        //调接口获取学科ID
        let subjectTag = await detailTags({ id: this.questionData.subjectID })
        this.subject = subjectTag.data.tagName
        console.log(subjectTag);

        //调接口获取目录
        let subjectDirectorys = await detailDirectorys({ id: this.questionData.catalogID })
        this.directorys = subjectDirectorys.data.directoryName
      }
    },

    //控制弹出层的真正按钮
    dialogTableVisible: {
      immediate: true,
      deep: true,
      handler () {
        this.dialogTableVisibleT = this.dialogTableVisible
      }
    }

  },




  methods: {
    initP (val) {
      return val.replace(/<[^>]+>/g, "")
    },
    //多选的点击事件
    changeFn () {
      this.selectList = this.trueSelectList
    },
    //单选的点击事件
    clickFn () {
      this.radio = this.trueRadio
    },
    videoIsShowFn () {
      this.videoIsShow = true

      this.$nextTick(() => {
        this.$refs.videoPlay.play()
      })
    },

    closeFn () {
      this.$emit('closeBtn')
    }

  }

}
</script>

<style scoped >
.dialog {
  margin-top: -70px;
}

.littleTitle {
  padding: 10px 0;
}

.questionColor {
  color: #0000ff;
}

.closeBtn {
  margin-right: 20px;
}

.answerParse {
  display: inline-block;
}

.multiSelectColor {
  color: #409eff;
}

.videoClass {
  width: 400px;
  height: 300px;
}
.videoc {
  width: 100%;
  height: 100%;
}
</style>
